Dialogs Guidelines 對話方塊指導規則

Usage  用法

對話方塊是螢幕上彈出的提示視窗。它有兩個主要作用:顯示重要資訊,或讓你做個選擇。你必須先處理對話方塊,才能做其他事情。由於對話方塊會影響使用者操作,我們應該少用它。如果可以用選單來解決,就選擇用選單,這樣對使用者更友好。

✓ 對於會阻斷應用正常操作的提示,以及需要使用者執行特定任務、做出決策或予以確認的關鍵資訊,使用對話方塊。
× 對於低優先順序或中優先順序的資訊,避免使用對話方塊,而應使用 Snackbar,它可以被使用者手動關閉,也可以自動消失。

Similar components  類似元件

Snackbar 也用於顯示重要訊息。根據資訊的重要性選擇合適的元件。這種元件訊息傳遞策略有助於避免過度使用對話方塊。

Snackbars 可以自動消失
omponent  元件Importance  重要性Action needed  需要採取行動
Snackbar  提示欄Low importance  低重要性Snackbars 可能沒有按鈕, 並且可以自動消失
Dialog  對話方塊High importance  高重要性對話方塊會阻止主內容,直到確認操作

Anatomy 結構

Basic dialog  基本對話方塊

1 Container 2 Icon (optional) 3 Headline (optional)4 Supporting text 5 Divider (optional) 6 Buttons (label text)7 Scrim

Full-screen dialog  全屏對話方塊

1 Container 2 Header region 3 Close affordance4 Headline (optional)5 Button (label text) 6 Divider (optional)

Container and scrim  容器與遮罩

對話方塊會顯示在螢幕最上層,裡面有標題、內容、按鈕等內容。當對話方塊出現時,其他內容會被一層灰色遮罩蓋住,這樣可以幫助使用者把注意力放在對話方塊上。

基本對話方塊出現在背景的遮罩層上方

Headline (optional)  標題(可選)

標題和按鈕要清楚說明對話方塊的用途。標題要用簡單直接的語言,說明要做什麼或詢問問題。不要使用這些說法:

✓ 是否“使用定位服務”Disagree / Agree。使用明確的標題來表達行為的目的,清楚告訴使用者這是在請求“啟用定位服務”與正文說明內容保持一致(都是在講定位資料會被用於哪些情況)使用者更容易理解正在做的決定是什麼
× "Are you sure?"這是一個模糊、含糊其詞的標題 按鈕還是:Disagree / Agree 正文仍然是在談“位置共享”,但標題與內容不對應,可能誤導使用者以為是在確認其他操作

標題應始終簡潔明瞭。如有必要,可以換行到第二行,並可以截斷。在全屏對話方塊中,較長的標題或長度不固定的標題(如翻譯),可以放在內容區域而不是應用欄中。

✓ 尋找縮短應用欄文字的方法,並將較長的標題放置在全屏對話方塊的內容區域中
× 避免在全屏對話方塊的頂部應用欄中放置過長的標題,因為截斷的文字可能導致誤解

Buttons (label text)  按鈕(標籤文字)

對話方塊中的按鈕讓使用者可以確認或關閉操作。按鈕靠對話方塊尾部對齊,確認按鈕位於最邊緣。此佈局會自動適應從右到左的語言。

✓ 在使用者做出選擇前,應禁用確認操作(1)。拒絕類操作(Dismissive actions)則永遠不應被禁用
✓ 只提供一個明確的操作(OK):庫存沒了,使用者不可能“取消”或“同意”什麼。使用者此時只是需要“確認已知曉”這個資訊,不需要做選擇。
× 不要將拒絕類操作(1)放在確認操作的右側。相反,應該將其放在確認操作的左側。
× 如果沒有明確的操作目的,就不該出現選擇按鈕。模糊的選擇只會讓使用者焦慮。“Cancel” 沒有明確含義:使用者根本不知道自己“取消”的是什麼,是關閉通知?是不同意功能?

對話方塊最多應包含兩個操作。如果只提供一個操作,則必須是一個確認操作,如果提供兩個操作,其中一個必須是確認操作,另一個是取消操作

✓ 橫排節省垂直空間,對比明確
× 避免兩個按鈕縱向堆疊,更佔空間

不要在對話方塊里加第三個按鈕(比如"瞭解更多")。這樣的按鈕會讓使用者離開對話方塊,沒法完成當前任務。如果你想展示更多資訊,可以直接把資訊放在對話方塊裡。如果資訊太多,最好在使用者開啟對話方塊之前就告訴他們。

× “瞭解更多”這個連結會跳轉頁面或開啟新介面,而不是在當前彈窗內進行說明。這麼做會讓使用者離開當前的彈窗上下文,但該彈窗還沒有完成確認或取消,造成一種**“未決狀態”(indeterminate state)**——使用者回來後,彈窗狀態是否保留?是否自動關閉?不明確,打斷決策流程,增加認知負擔

Basic dialog  基本對話方塊

基本對話方塊會在需要時打斷使用者,用來顯示重要訊息或讓使用者做選擇。它主要用在三種情況:顯示警報訊息、讓使用者快速選擇,或確認某個操作。

基本對話方塊要求使用者在關閉之前採取行動
基本對話方塊可以讓使用者在確認選擇之前提供確認

基本對話方塊通常以警告或列表的形式出現,但也可能使用各種佈局和元件組合,包括列表、日期選擇器和時間選擇器。

Full-screen dialog  全屏對話方塊

全屏對話方塊佔據整個手機螢幕。它主要用來處理需要多個步驟的操作,比如當你想新增一個日曆活動時,需要填寫多項資訊。它有個特別之處:它是唯一可以在其中開啟其他對話方塊的型別。你還可以透過點選浮動按鈕(FAB)讓它展開成全屏對話方塊。

當全屏對話方塊在未儲存的情況下關閉時,其前方會出現一個基本對話方塊,用於確認是否放棄選擇而不儲存更改。

什麼時候用全屏對話方塊?以下情況可以考慮:

要注意的是,全屏對話方塊只適合在手機這樣的小螢幕裝置上使用。如果是在平板電腦或電腦這樣的大螢幕上,就應該用普通的對話方塊。

儲存更改 Saving Changes

在全屏對話方塊裡儲存修改很簡單:點選"儲存"按鈕就可以了。如果想取消修改,點選左上角的"X"或"返回"按鈕即可。

確認操作 Confirmation

在填完所有必要資訊之前,"儲存"按鈕是不能點選的。

如果你沒有做任何修改就關閉對話方塊,它會直接關閉。但是如果你做了修改,系統會問你是否確定要放棄這些修改。

× “關閉”按鈕含義模糊,因為他未指明將被儲存還是丟棄

Dialog windows 對話方塊視窗

當你開啟全屏對話方塊時,其他選單和對話方塊仍然可以顯示在它的上面。這些新開啟的對話方塊會佔據整個螢幕,而不是以小視窗的形式顯示。

Navigation 導航

全屏對話方塊頂部應用欄中的關閉"X"按鈕是唯一的導航選項,因為使用者只能完成、取消或關閉對話方塊。

Responsive layout  響應式佈局

對話方塊可以根據視窗大小類的變化而切換型別。例如,全屏對話方塊在較大的斷點處可以變為基本對話方塊。

1 Full screen dialog on mobile 2 Dialog on a tablet

Medium window size  中等視窗大小

基本對話方塊預設出現在中心位置,但可以覆蓋其位置以提供更符合人體工程學的體驗。

可自定義在螢幕右側

Expanded window size  擴充套件視窗大小

在大螢幕(比如電腦桌面)上,對話方塊會顯示在半透明的背景層上面。這樣設計可以讓對話方塊更顯眼,幫助使用者注意到需要處理的內容。

距螢幕邊緣保留56dp的邊距

Behavior  行為

Appearing  出現

對話方塊會突然出現在螢幕上,讓使用者必須先處理它才能繼續其他操作。由於這會打斷使用者的工作,所以要小心使用。不是所有設定或選擇都需要用對話方塊。對話方塊開啟和關閉時會有動畫效果。

Position  位置

對話方塊在關閉或採取操作(如選擇設定)之前會保持焦點。它們不應被其他元素遮擋或部分顯示在螢幕上,全屏對話方塊除外。

Scrolling  滾動

儘量不要讓對話方塊的內容需要滾動。如果內容必須滾動,請記住:

Interaction & style  互動與樣式

對話方塊會打斷使用者正在做的事情。它會跳到螢幕最前面,暫停使用者的操作,包括那些正在使用讀屏軟體的使用者。正因為對話方塊會影響使用者體驗,我們應該只在顯示重要資訊時才使用它。如果是不那麼重要的資訊,最好用其他方式顯示,不要打斷使用者。

✓ 在應用程式內容流中使用其他介面元素來呈現非關鍵資訊
× “同步完成,三張新照片已同步至您的裝置”避免在對話方塊中放置非關鍵資訊